<template>
  <div class=category>
    <!-- 导航栏bar模块 -->
    <div class="category-nav-bar">
      <NavBar>
        <template v-slot:center>商品分类</template>
      </NavBar>
    </div>
    <div class="category-content">
      <!-- 左侧导航栏模块 -->
      <SlideBar @slideBarItemClick="slideBarItemClick" class="slide-bar" :category-list="categoryList"></SlideBar>
      <!-- 右侧商品展示模块 -->
      <SubCategory :subCategoryList="subCategoryList[currentIndex]" class="SubCategory"/>
    </div>
    
  </div>
</template>
<script>
//数据引入
import {getCategory,getSubcategory} from '@/networks/category'
//组件引入
import NavBar from '@/components/common/navbar/NavBar'
import SlideBar from './childcategory/SlideBar'
import SubCategory from './childcategory/SubCategory' 
export default {
  name:"Category",
  components:{
    NavBar,
    SlideBar,
    SubCategory,
  },
  data() {
    return {
      categoryList:[],
      currentIndex:0,
      subCategoryList:[],
    }
  },
  created() {
    //侧边栏导航等数据
    getCategory().then(res=>{
      console.log(res,"woshi");
      //保存数据
      this.categoryList=res.data.category.list;
      console.log("categoryList",this.categoryList);
      //遍历侧边栏的所有item,然后拿出maikey,取到对应每个item的数据push到list保存起来
      for(let item of this.categoryList){
         getSubcategory(item.maitKey).then(res=>{
           this.subCategoryList.push(res.data.list)
         })
      };
      console.log("jizhongbaocun",this.subCategoryList);
    })
  },
  methods: {
    slideBarItemClick(obj){
      console.log("woshicategory",obj.index);
      //记录当前的点击的item
      this.currentIndex=obj.index;
      console.log("woshicategory",obj.maitKey);
      //监听侧边栏的点击事件后，拿到对应index,请求对应图文数据
      getSubcategory(obj.maitKey).then(res=>{
        console.log(res);
        //保存拿到的数据
        
      });
      
    }
  },
}
</script>
<style scoped>
.category{
  width:100%;
  height: 100vh;
}
.category-nav-bar{
  background-color: var(--color-tint);
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  z-index: 99; 
}
.category-content{
  margin-top: 44px;
  display: flex;
  height: calc(100vh - 44px - 49px);
}
.slide-bar{
 white-space: nowrap;
 flex-basis: auto;
}
.SubCategory{
width:100%
}
</style>